<template>
  <div class="my-borrows">
    <el-card>
      <template #header>
        <h2>我的借阅记录</h2>
      </template>

      <el-table :data="borrowRecords" style="width: 100%">
        <el-table-column prop="resourceName" label="资源名称" />
        <el-table-column prop="borrowTime" label="借用时间" />
        <el-table-column prop="expectedReturn" label="预计归还时间" />
        <el-table-column prop="actualReturn" label="实际归还时间" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getBorrowStatusType(scope.row.status)">
              {{ getBorrowStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="penaltyAmount" label="罚款金额">
          <template #default="scope">
            {{ scope.row.penaltyAmount ? `¥${scope.row.penaltyAmount}` : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button
              v-if="scope.row.status === 1"
              type="primary"
              size="small"
              @click="handleReturn(scope.row)"
            >
              归还
            </el-button>
            <el-button
              v-if="scope.row.status === 2 && scope.row.penaltyAmount"
              type="warning"
              size="small"
              @click="handlePayPenalty(scope.row)"
            >
              缴纳罚款
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 缴纳罚款对话框 -->
    <el-dialog v-model="penaltyDialogVisible" title="缴纳罚款" width="400px">
      <div class="penalty-info">
        <p>需缴纳罚款金额：¥{{ selectedRecord?.penaltyAmount }}</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="penaltyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmPayPenalty" :loading="paying">
            确认支付
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useBorrowStore } from '../stores/borrow'
import { ElMessage, ElMessageBox } from 'element-plus'

const borrowStore = useBorrowStore()

const borrowRecords = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const penaltyDialogVisible = ref(false)
const selectedRecord = ref(null)
const paying = ref(false)

const getBorrowStatusType = (status: number) => {
  const statusMap = {
    0: 'info',    // 待审核
    1: 'warning', // 借用中
    2: 'danger',  // 已逾期
    3: 'success'  // 已完成
  }
  return statusMap[status] || 'info'
}

const getBorrowStatusText = (status: number) => {
  const statusMap = {
    0: '待审核',
    1: '借用中',
    2: '已逾期',
    3: '已完成'
  }
  return statusMap[status] || '未知状态'
}

const handleReturn = async (record: any) => {
  try {
    await ElMessageBox.confirm('确认要归还该资源吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const success = await borrowStore.returnResource(record.resourceId)
    if (success) {
      ElMessage.success('归还成功')
      loadBorrowRecords()
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('归还失败')
    }
  }
}

const handlePayPenalty = (record: any) => {
  selectedRecord.value = record
  penaltyDialogVisible.value = true
}

const confirmPayPenalty = async () => {
  if (!selectedRecord.value) return
  
  paying.value = true
  try {
    const success = await borrowStore.submitPenalty(
      selectedRecord.value.penaltyAmount,
      selectedRecord.value.id
    )
    if (success) {
      ElMessage.success('支付成功')
      penaltyDialogVisible.value = false
      loadBorrowRecords()
    }
  } catch (error) {
    ElMessage.error('支付失败')
  } finally {
    paying.value = false
  }
}

const loadBorrowRecords = async () => {
  // TODO: 实现加载借阅记录的API
  // const result = await borrowStore.getBorrowRecords({
  //   page: currentPage.value,
  //   pageSize: pageSize.value
  // })
  // if (result) {
  //   borrowRecords.value = result.records
  //   total.value = result.total
  // }
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
  loadBorrowRecords()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadBorrowRecords()
}

onMounted(() => {
  loadBorrowRecords()
})
</script>

<style scoped>
.my-borrows {
  padding: 20px;
}

.el-card :deep(.el-card__header) {
  padding: 15px 20px;
}

.el-card :deep(.el-card__header) h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.penalty-info {
  text-align: center;
  font-size: 16px;
}

.penalty-info p {
  margin: 10px 0;
  color: #f56c6c;
  font-weight: bold;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 